*{margin: 0;padding: 0;}

body{background: rgba(0,0,0,.6);}
header{width: 100%; height: 120px;position: relative; background:url(../images/bg.png) no-repeat center center; background-size: cover;}
.logo{position: absolute;width: 150px;left: 5%; top:40px;height: 50px;background: url(../images/logo.png) no-repeat center center; background-size: contain;}
.box{width: 90%;margin: 20px auto;overflow: hidden;}
.box .figure{float: left; width: 30%; margin: 0 30px 30px 0;}
.box .figure-img{width: 100%;}
.last-figure .figure{width: 45%;margin: 0 18px 33px 0;} 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {header{background: rgba(0, 0, 0, .5);height: 50px;}.logo{top: 0;left: 2%;}.box{width: 94%;display: flex;flex-direction: row;flex-wrap: wrap; align-content: space-between;}.box .figure{ width: 48%; margin:0 4% 2% 0;}.box .figure:nth-child(2n){margin-right: 0;}}